<template>
	<view class="card-page">
		<u-navbar title="我的名片" :titleStyle="{ color: '#fff' }" leftIconColor="#fff"
			bgColor="transparent" @leftClick="bakcHandle"></u-navbar>

		<image class="top-img" src="@/static/card-bg.jpg" mode="aspectFill"></image>

		<view class="container">
			<view class="card-box">
				<view class="info-box">
					<view class="info">
						<image class="avatar" :src="c_touxiang_img" mode="aspectFill"></image>
						<view class="content">
							<view class="name u-line-1">{{c_name}}</view>
							<view class="company u-line-1">{{c_work}}</view>
							<view class="job u-line-1">{{c_company}}</view>
						</view>
						<image class="credit" src="@/static/credit.png" mode="widthFix"></image>
					</view>
					<view class="data">
						<view class="item" v-if="c_phone">
							<u-icon name="phone-fill" color="#fff" size="36rpx"></u-icon>
							<view class="text">电话：{{c_phone}}</view>
						</view>
						<view class="item" v-if="c_email">
							<u-icon name="email-fill" color="#fff" size="36rpx"></u-icon>
							<view class="text">邮箱：{{c_email}}</view>
						</view>
						<view class="item" v-if="c_address || c_address_detail">
							<u-icon name="map-fill" color="#fff" size="36rpx"></u-icon>
							<view class="text u-line-1">地址：{{c_address}}{{c_address_detail}}</view>
						</view>
					</view>
				</view>
				<view class="edit-box" @click="goEditInfo">
					<u-icon name="edit-pen-fill" color="#095042" size="36rpx"></u-icon>
					<view class="text">编辑基础信息</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<button class="btn" open-type="share">发名片</button>
		</view>
	</view>
</template>

<script>
	import {
		getCardInfo
	} from '../../../api/api';

	export default {
		data() {
			return {
				shareCode: '',
				cardId: 0,
				c_name: '',
				c_touxiang_img: '',
				c_company: '',
				c_work: '',
				c_phone: '',
				c_email: '',
				c_address: '',
				c_address_detail: ''
			}
		},
		onLoad() {
			this.getData();
		},
		onShareAppMessage() {
			return {
				path: '/pages/my/card/look?regcode=' + this.shareCode + '&card=' + this.cardId,
			}
		},
		methods: {
			getData() {
				getCardInfo({is_password:false}).then(res => {
					if (res) {
						var data = res.data
						this.cardId = data.id;
						this.c_name = data.c_name;
						this.c_touxiang_img = data.c_touxiang_img;
						this.c_company = data.c_company;
						this.c_work = data.c_work;
						this.c_phone = data.c_phone;
						this.c_email = data.c_email;
						this.c_address = data.c_address;
						this.c_address_detail = data.c_address_detail;
						this.shareCode = data.shareCode;
					}
				})
			},
			cancelHandle() {
				uni.navigateBack()
			},
			goEditInfo() {
				uni.navigateTo({
					url: '/pages/my/card/editInfo?card_id='+this.cardId
				})
			},
			bakcHandle () {
				uni.navigateBack({
					fail: () => {
						uni.switchTab({
							url: '/pages/my/my'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.card-page {
		min-height: 100%;
		background-color: #eef7f3;

		.top-img {
			width: 750rpx;
			height: 600rpx;
		}

		.container {
			margin-top: -352rpx;
			padding: 0 30rpx;
			position: relative;
			z-index: 10;
			color: #fff;

			.card-box {
				.info-box {
					box-sizing: border-box;
					height: 352rpx;
					padding: 34rpx 20rpx 20rpx;
					border: 1rpx solid #fff;
					border-bottom: none;
					border-radius: 22rpx 22rpx 0 0;
					background-color: rgba(0, 0, 0, 0.1);
					backdrop-filter: blur(20px);
					display: flex;
					flex-direction: column;

					.info {
						display: flex;

						.avatar {
							box-sizing: border-box;
							width: 142rpx;
							height: 142rpx;
							border-radius: 50%;
							border: 4rpx solid #fff;
						}

						.content {
							flex: 1;
							padding-top: 10rpx;
							margin: 0 20rpx;

							.name {
								font-size: 34rpx;
								font-weight: bold;
							}

							.company {
								margin-top: 10rpx;
								font-size: 24rpx;
							}

							.job {
								margin-top: 10rpx;
								font-size: 24rpx;
							}
						}

						.credit {
							width: 100rpx;
						}
					}

					.data {
						margin-top: auto;

						.item {
							display: flex;
							align-items: center;

							&+.item {
								margin-top: 10rpx;
							}

							.text {
								margin-left: 10rpx;
								font-size: 24rpx;
							}
						}
					}
				}

				.edit-box {
					height: 70rpx;
					border-radius: 0 0 22rpx 22rpx;
					background: linear-gradient(90deg, #2dd145, #25bcce);
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						margin-left: 8rpx;
						color: #095042;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}
		}

		.bottom-box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
			height: 120rpx;
			padding: 0 30rpx;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background-color: #fff;
			display: flex;
			align-items: center;

			.btn {
				margin: 0;
				padding: 0;
				border-radius: 92rpx;
				width: 100%;
				height: 92rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 92rpx;
				background: linear-gradient(90deg, #29d144, #26bccf);
			}
		}
	}
</style>